import {useState,useEffect} from 'react'
import './fuwuadd.css'
import { UserOutlined } from '@ant-design/icons';
import { Input, Avatar, Space, Select, Form } from 'antd';
import { DatePicker } from 'antd';
import {  Switch } from 'antd';
import {useNavigate} from 'react-router-dom'
import axios from 'axios'
export default function Fwadd(){
    const navigate = useNavigate();
    const [name,setname]=useState('')
    const [id,setid]=useState('')
    const [tou,settou]=useState()
    const [cateId,setcateId]=useState('')
    const [phone,setphone]=useState('')
    const [tagId,settagId]=useState('')
    const [address,setaddress]=useState('')
    const [status, setStatus] = useState(true)
    //服务类型
    const [fwtype,setfwtype]=useState([])
    const getfwtype=()=>{
        axios.get(`http://localhost:3000/csc/serve/list`).then(res => {
            console.log('1111获取数据成功', res.data.data)
            setfwtype(res.data.data)
        })
    }

    //标签
    const [biao,setBiao]=useState([])
    const getbiao=()=>{
        axios.get(`http://localhost:3000/csc/tag/list`).then(res => {
            console.log('2222获取数据成功', res.data.data)
            setBiao(res.data.data)
        })
    }
    //添加
    const fwadd=()=>{
        const form={
            name,
            id,
            // tou,
            cateId,
            phone,
            tagId,
            address,
            status
        }
        axios.post(`http://localhost:3000/csc//seves/add`,form).then((res)=>{
            console.log('添加数据成功', res.data.data)
            navigate('/zhu/navpage/fuwu')
        })
    }
    useEffect(()=>{
        getfwtype()
        getbiao()
    },[])
    return(
        <div>
            <div className="cscfwwaihe">
                <div className="csc_futitle">
                    <div >
                        <span className="csc_fwkuai"></span>
                        <span className='csc_fwspan1'>新增用户信息</span>
                    </div>
                    <hr />
                    <div className="csc_fwcontent">
                        <p className='csc_fwp1'>基础信息</p>
                        <div>
                            <span className='csc_fwnicheng'>姓名</span>
                            <span><Input placeholder="请输入" className='fwuseraddinput' value={name} onChange={(e)=>{
                                setname(e.target.value)
                            }} /></span>
                            <span className='csc_fwID'>ID</span>
                            <span><Input placeholder="请输入" className='fwuseraddinput' value={id} onChange={(e)=>{
                                setid(e.target.value)
                            }} /></span>
                            <span className='csc_fwtouxiang'>头像</span>
                            <span>
                                <Space wrap size={16} className='csc_fwxiang'>
                                    <Avatar shape="square" icon={<UserOutlined />} />
                                </Space>
                            </span>
                        </div>
                        <div>
                            <span className='csc_fwlx'>服务类型</span>
                            <Select placeholder="请选择" className='csc_fwaddselect'
                                value={cateId}
                                onChange={(value)=>setcateId(value)}
                            >
                                {
                                    fwtype.map(item=>{
                                        return <Select.Option value={item._id} key={item.id}>{item.name}</Select.Option>
                                    })
                                }      
                            </Select>
                            <span className='csc_fwphone'>手机号码</span>
                            <span><Input placeholder="请输入" className='fwuseraddinput' value={phone} onChange={(e)=>{
                                setphone(e.target.value)
                            }} /></span>
                            <span className='csc_fwlx'>标签</span>
                            <Select placeholder="请选择" className='csc_fwaddselect'
                             value={tagId}
                             onChange={(value)=>settagId(value)}
                            >
                                {
                                    biao.map(item=>{
                                        return <Select.Option value={item._id} key={item.id}>{item.name}</Select.Option>
                                    })
                                }      
                            </Select>
                        </div>
                        <div>
                            <span className='csc_fwqy'>服务区域</span>
                            <span><Input placeholder='请输入' className='csc_fwaddselect' value={address} onChange={(e)=>{
                                setaddress(e.target.value)
                            }}></Input></span>
                        </div>
                        <div>
                            <span className='csc_fwjian'>简介</span>
                            <span><Input placeholder="请输入" className="csc_fwjie" /></span>
                        </div>
                        <div>
                            <p className='csc_fwsm'>实名信息</p>
                        </div>
                        <div>
                            <span className='csc_fwshen'>身份证号</span>
                            <span><Input placeholder="请输入" className='fwuseraddinput' /></span>
                        </div>
                        <div>
                            <span className='csc_fwzhuang'>状态</span>
                            <span>
                            <Space direction="vertical" className='csc_fwtai'>
                                <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked 
                                value={status}
                                onChange={()=>{setStatus(status)}}
                                />
                            </Space>
                            </span>
                        </div>
                        <div className='csc_fwbtnadd'>
                            <button className='csc_fwbtn6' onClick={fwadd}  >提交申请</button>
                            <button className='csc_fwbtn7' onClick={()=>navigate('/zhu/navpage/fuwu')}>返回</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}